﻿<div id="panel5" class="container">
    <update-meta property="og:title" content="Penang Realty 世界地產 HOME LOAN Calculator ">
    <!--<update-meta property="og:description" content="HOME LOAN Calculator" >-->
    <update-meta property="og:url" content="http://www.penangrealty.my/HomeLoanCalculator" />
    <h3> <u> Home Loan Calculator </u></h3>
    <div class="form-group">
        <table class="table table-condensed table-responsive borderless">
            <tbody>


                <tr>

                    <td>
                        <label>Purchase Price (RM)</label>
                    </td>

                    <td>
                        <input class="form-control" id="txtPrice" type="number" ng-model="purchasePrice" tabindex="1" style="width: 100%" ng-change="calculate()" />
                    </td>

                </tr>
                <tr>

                    <td>
                        <label>Margin of Financing, MOF (%)</label>
                    </td>

                    <td>
                        <input class="form-control" id="txtMargin" type="number" ng-model="marginFinance" style="width: 100%" ng-change="calculate()" />
                    </td>

                </tr>
                <tr>

                    <td>
                        <label>Loan Amount (RM)</label>
                    </td>

                    <td>
                        <input value="0" id="txtLoan" class="form-control" type="number" ng-model="loanAmount" disabled="disabled" />
                    </td>

                </tr>

                <tr>

                    <td>
                        <label>MRTA (RM)</label>
                    </td>

                    <td>
                        <input class="form-control" id="txtMrta" type="number" ng-model="mrta" ng-change="calculate()" />
                    </td>

                </tr>
                <tr>


                    <td>
                        <label>Others (RM)</label>
                    </td>

                    <td>
                        <input id="txtOthers" type="number" class="form-control" ng-model="others" ng-change="calculate()" />
                    </td>

                </tr>
                <tr>

                    <td>
                        <label>Total Loan Amount (RM)</label>
                    </td>

                    <td>
                        <input id="txtTotal" type="number" disabled="disabled" ng-model="total" class="form-control" />
                    </td>

                </tr>
                <tr>
                    <td>
                        &nbsp;

                    </td>

                </tr>
                <tr>

                    <td>
                        <label>Interest/Profit Rate (%)</label>
                    </td>

                    <td>
                        <input id="txtInterestRate" class="form-control" ng-model="interestRate" type="number" tabindex="5" style="width: 100%" ng-change="calculate()" />
                    </td>

                </tr>
                <tr>

                    <td>
                        <label>Loan Tenure (years)</label>
                    </td>

                    <td>
                        <input id="txtTenure" type="number" class="form-control" ng-model="tenure" tabindex="6" style="width: 100%" ng-change="calculate()" />
                    </td>

                </tr>
                <tr>
                    <td>
                        &nbsp;

                    </td>

                </tr>
                <tr>

                    <td>
                        <label>Monthly Repayment (RM)</label>
                    </td>

                    <td>
                        <input id="txtMonthlyPayment" type="number" disabled="disabled" class="form-control" ng-model="monthlyPayment" />
                    </td>

                </tr>
                <tr>

                    <td>
                        <label>Total Payment (RM)</label>
                    </td>

                    <td>
                        <input id="txtTotalPayment" type="number" class="form-control" ng-model="totalPayment" disabled="disabled" />
                    </td>

                </tr>
                <tr>

                    <td>
                        <label>Total Interest/Profit (RM)</label>
                    </td>

                    <td>
                        <input id="txtTotalInterest" type="number" disabled="disabled" class="form-control" ng-model="totalInterest" />
                    </td>

                </tr>
                <tr>

                    <td>
                        <label>Monthly Interest(RM)</label>
                    </td>

                    <td>
                        <input id="txtMonthlyIntest" type="number" disabled="disabled" class="form-control" ng-model="monthlyInterest" />
                    </td>

                </tr>


                <tr>

                    <td>
                        <a class="btn btn-danger" style="padding-left: 25px;
                                                    padding-right: 25px;
                                                    background-color: transparent!important;
                                                    color: #df4a43!important;
                                                    border: 2px solid #df4a43;
                                                    font-size: 1em;" ng-click="generateTable()">Calculate</a>

                      <!--  <button id="btnAmortization" type="button" class="btn waves-effect waves-light subscribe-submit" ng-click="generateTable()">Amortization Table</button>-->
                    </td>




                    <!--<td>
                        <button type="button" id="btnCalculate" class="btn btn-primary btn-lg active">Calculate</button>
                    </td>-->

                </tr>
            </tbody>
        </table>
    </div>

    <div id="dvAmortization" ng-show="calc">
        <table id='tblAmortization' class='table table-striped table-responsive'>
            <tbody>
                <tr><td>Month</td><td>Loan Balance</td><td>Principle Balance</td><td>Interest</td></tr>
                <tr ng-repeat="payment in payments">
                    <td>{{payment.month}}</td>
                    <td>{{payment.loan_balance | number :2}}</td>
                    <td>{{payment.monthly_principle_balance  | number :2}}</td>
                    <td>{{payment.monthly_interest | number :2}}</td>
                </tr>

            </tbody>
        </table>
    </div>

</div>



<!--<script>
    $(document).ready(function () {



        function LoanCalculation() {

            var purchase_price = $("#txtPrice").val();
            var margin_finance = $("#txtMargin").val();

            var loan_amount = purchase_price * margin_finance / 100;
            $("#txtLoan").val(loan_amount);

            var mrta = $("#txtMrta").val();
            var others = $("#txtOthers").val();
            var total_loan_amount = parseFloat(loan_amount) + parseFloat(mrta) + parseFloat(others);

            $("#txtTotal").val(total_loan_amount);
            var total_months = $("#txtTenure").val() * 12;

            var r = $("#txtInterestRate").val() / (12 * 100);
            var p = (total_loan_amount * r * Math.pow((1 + r), total_months)) / (Math.pow((1 + r), total_months) - 1);
            var prin = Math.round(p * 100) / 100;
            $("#txtMonthlyPayment").val(prin);
            var mon = Math.round(((total_months * prin) - total_loan_amount) * 100) / 100;
            $("#txtTotalInterest").val(parseFloat(mon).toFixed(2));
            var tot = Math.round((mon / total_months) * 100) / 100;
            $("#txtMonthlyIntest").val(parseFloat(tot).toFixed(2));

            $("#txtTotalPayment").val(parseFloat(prin * total_months).toFixed(2));
        }
        // add class
        $("input").addClass("form-control");

        $("input").keypress(function () {
            format(this);
        });

        $("input").change(LoanCalculation);

        function format() {
            if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
                $('.modal-body').html(" <span >Must be integer!</span>");
                $('#myModal').modal('show');
                event.preventDefault();

            }

            var text = $(this).val();

            if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2)) {
                event.preventDefault();
            }
        }

        function PageInit() {
            LoanCalculation();
        }

        PageInit();

        $("#btnCalculate").click(function () {
            LoanCalculation();
        });

        $("#btnAmortization").click(function () {


            var total_months = $("#txtTenure").val() * 12;
            var total_payment = $("#txtTotalPayment").val();
            var monthly_payment = $("#txtMonthlyPayment").val();
            var monthly_interest = $("#txtMonthlyIntest").val();
            var total_loan_amount = $("#txtTotal").val();
            var monthly_principle = monthly_payment - monthly_interest;
            var loan_balance = total_payment;
            var monthly_principle_balance = total_loan_amount;

            var table = "<table id='tblAmortization' class='table table-striped table-responsive'><tbody> ";
            table += "<tr class='success'><td>Month</td><td>Loan Balance</td><td>Principle Balance</td><td>Interest</td>";
            for (var i = 1; i <= parseInt(total_months) ; i++) {
                loan_balance = parseFloat(loan_balance - monthly_payment).toFixed(2);
                monthly_principle_balance = parseFloat(monthly_principle_balance - monthly_principle).toFixed(2);
                table += "<tr><td>" + i + "</td><td>" + loan_balance + "</td>" + "<td>" + monthly_principle_balance + "</td>" + "<td>" + monthly_interest + "</td>";
                table += "</tr>"
            }
            table += "</tbody><table>"
            $("#dvAmortization").html("");
            $("#dvAmortization").append(table);
            //var options = {
            //    "backdrop": "static"
            //}


        });

    });
</script>-->